<template>
  <div class="report-page">
    <!-- 头部导航 -->
    <div class="nav-header">
      <van-icon name="arrow-left" class="back-icon" @click="goBack" />
      <div class="title">白蚁上报</div>
      <div class="header-actions">
        <div class="test-detail-btn" @click="goToTestDetail">
          <van-icon name="eye-o" size="16" />
          <!-- <span>详情</span> -->
        </div>
        <div class="test-evaluation-btn" @click="goToTestEvaluation">
          <van-icon name="star-o" size="16" />
          <!-- <span>评价</span> -->
        </div>
        <div class="my-report-btn" @click="goToMyReport">
          <van-icon name="orders-o" size="18" />
          <!-- <span>我的上报</span> -->
        </div>
        <div class="enterprise-btn" @click="goToEnterprise">
          <van-icon name="shop-o" size="16" />
          <!-- <span>白蚁企业</span> -->
        </div>
      </div>
    </div>

    <!-- 表单内容 -->
    <div class="form-content">
      <!-- 所在小区 -->
      <div class="form-item">
        <div class="form-label">所在小区</div>
        <div class="form-input">
          <van-field
            v-model="formData.area"
            placeholder="请输入"
            input-align="right"
            clearable
          />
        </div>
      </div>

      <!-- 房屋地址 -->
      <div class="form-item">
        <div class="form-label">房屋地址</div>
        <div class="form-input">
          <van-field
            v-model="formData.address"
            placeholder="请输入"
            input-align="right"
            clearable
          />
        </div>
      </div>

      <!-- 问题描述 -->
      <div class="form-textarea-item">
        <div class="form-label">问题描述</div>
        <div class="textarea-container">
          <van-field
            v-model="formData.description"
            type="textarea"
            placeholder="请描述您的问题（最多200字）"
            rows="5"
            maxlength="200"
            show-word-limit
            @input="updateWordCount"
          />
        </div>
      </div>

      <!-- 上传图片 -->
      <div class="form-upload-item">
        <div class="form-label">
          上传图片 <span class="upload-hint">（最多5张）</span>
        </div>
        <div class="upload-container">
          <van-uploader
            v-model="formData.images"
            multiple
            :max-count="5"
            :before-read="beforeRead"
            :after-read="afterRead"
            @delete="deleteImage"
            @click-preview="showImagePreview"
            :preview-full-image="false"
            :preview-options="{ showIndex: true }"
            :show-upload="formData.images.length < 5"
            accept="image/*"
            :image-fit="'cover'"
            :before-delete="() => true"
            class="custom-uploader"
          >
            <div class="upload-button">
              <van-icon name="photograph" size="20" />
            </div>
          </van-uploader>

          <div class="upload-guide" v-if="formData.images.length === 0">
            请上传清晰的白蚁照片，便于快速识别
          </div>
        </div>
      </div>

      <!-- 上传视频 -->
      <div class="form-upload-item">
        <div class="form-label">
          上传视频 <span class="upload-hint">（大小限500MB内）</span>
        </div>
        <div class="upload-container">
          <!-- 如果已上传视频则显示视频播放器 -->
          <div
            v-if="formData.video.length > 0"
            class="video-container"
            @click="showVideoPlayer"
          >
            <video
              :src="formData.video[0].url"
              width="130px"
              height="74px"
              class="video-player"
            ></video>
            <div class="video-play-icon">
              <van-icon name="play-circle-o" size="24" />
            </div>
            <div class="video-delete" @click.stop="deleteVideo">
              <van-icon name="cross" size="16" />
            </div>
          </div>

          <!-- 如果没有上传视频则显示上传按钮 -->
          <van-uploader
            v-else
            v-model="formData.video"
            :after-read="afterVideoRead"
            accept="video/*"
            :max-count="1"
            @delete="deleteVideo"
          >
            <div class="video-upload-button">
              <van-icon name="video-o" size="20" />
            </div>
          </van-uploader>
        </div>
      </div>

      <!-- 防治企业 -->
      <div class="form-item no-padding">
        <div class="form-label">防治企业</div>
        <div class="form-input">
          <van-field
            v-model="formData.company"
            readonly
            placeholder="请选择"
            is-link
            input-align="right"
            :border="false"
            @click="showCompanySelector"
          />
        </div>
      </div>

      <!-- 预约时间 -->
      <div class="form-item no-padding">
        <div class="form-label">预约时间</div>
        <div class="form-input">
          <van-field
            v-model="formData.appointmentTime"
            readonly
            placeholder="请选择"
            is-link
            input-align="right"
            :border="false"
            @click="showDatetimeSelector"
          />
        </div>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="bottom-buttons">
      <van-button plain round type="info" class="cancel-btn" @click="cancel">
        取 消
      </van-button>
      <van-button type="info" round class="submit-btn" @click="submitForm">
        提 交
      </van-button>
    </div>

    <!-- 企业选择器弹出层 -->
    <van-popup v-model="showCompanyPicker" position="bottom" round>
      <van-picker
        title="选择防治企业"
        :columns="companyList"
        @confirm="onCompanyConfirm"
        @cancel="onCompanyCancel"
        :show-toolbar="true"
      />
    </van-popup>

    <!-- 日期时间选择器弹出层 -->
    <van-popup v-model="showDatetimePicker" position="bottom" round>
      <van-datetime-picker
        title="选择预约时间"
        type="datetime"
        :min-date="new Date()"
        :max-date="
          new Date(
            new Date().getFullYear() + 1,
            new Date().getMonth(),
            new Date().getDate()
          )
        "
        @confirm="onDatetimeConfirm"
        @cancel="onDatetimeCancel"
      />
    </van-popup>

    <!-- 视频播放弹窗 -->
    <van-dialog
      v-model="showVideoDialog"
      title="视频播放"
      class="video-preview-dialog"
      :show-confirm-button="true"
      confirm-button-text="关闭"
      @confirm="closeVideoPlayer"
      @before-close="handleDialogBeforeClose"
    >
      <div class="video-dialog-content">
        <video
          v-if="formData.video.length > 0"
          :src="formData.video[0].url"
          controls
          autoplay
          class="dialog-video-player"
          ref="videoPlayerRef"
        ></video>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  name: "HomeView",
  data() {
    return {
      // 表单数据
      formData: {
        area: "鞍山二村",
        address: "",
        description: "",
        images: [],
        video: [],
        company: "",
        appointmentTime: "",
      },

      // 防治企业列表
      companyList: [
        { text: "上海白蚁防治有限公司", value: "上海白蚁防治有限公司" },
        { text: "诚信白蚁防治中心", value: "诚信白蚁防治中心" },
        { text: "上海市白蚁防治研究所", value: "上海市白蚁防治研究所" },
        { text: "绿色环保白蚁防治公司", value: "绿色环保白蚁防治公司" },
        { text: "安全白蚁防治服务中心", value: "安全白蚁防治服务中心" },
      ],

      // 企业选择器显示控制
      showCompanyPicker: false,

      // 字数计数
      descriptionLength: 0,

      // 视频播放弹窗控制
      showVideoDialog: false,

      // 日期时间选择器显示控制
      showDatetimePicker: false,
    };
  },

  mounted() {
    // 获取安全区域值的方法
    const safeAreaBottom = this.getSafeAreaBottom();
    console.log("安全区域底部高度:", safeAreaBottom);
  },

  methods: {
    // 返回上一页
    goBack() {
      this.$router.go(-1);
    },

    // 选择企业
    onCompanyConfirm(value) {
      console.log("value", value);
      this.formData.company = typeof value === "object" ? value.text : value;
      this.showCompanyPicker = false;
    },

    // 取消企业选择
    onCompanyCancel() {
      this.showCompanyPicker = false;
    },

    // 显示企业选择器
    showCompanySelector() {
      this.showCompanyPicker = true;
    },

    // 更新描述字数
    updateWordCount(event) {
      this.descriptionLength = event.length;
    },

    // 检查文件类型
    beforeRead(file) {
      console.log("beforeRead", file);

      // 处理多选时，file是数组的情况
      if (Array.isArray(file)) {
        // 检查每个文件是否符合要求
        for (const item of file) {
          const isValid = this.checkFileType(item);
          if (!isValid) {
            return false; // 只要有一个文件不符合，就拒绝整个上传
          }
        }
        return true; // 所有文件都符合要求
      } else {
        // 单文件上传时，直接检查
        return this.checkFileType(file);
      }
    },

    // 检查文件类型的辅助函数
    checkFileType(file) {
      const allowedTypes = ["image/jpeg", "image/png", "image/gif"];
      if (!allowedTypes.includes(file.type)) {
        Toast.fail("只能上传JPG、PNG或GIF图片");
        return false;
      }
      return true;
    },

    // 上传图片
    afterRead(file) {
      // 处理多选的情况
      if (Array.isArray(file)) {
        // 如果是数组，对每个文件分别处理
        file.forEach((item) => {
          this.processUpload(item);
        });
        return true;
      } else {
        // 单文件上传
        return this.processUpload(file);
      }
    },

    // 处理单个文件的上传
    processUpload(file) {
      console.log("file:", file);
      let fileObj, fileSize;

      // 判断文件格式
      if (file.file) {
        fileObj = file.file;
        fileSize = file.file.size;
      } else {
        fileObj = file;
        fileSize = file.size;
      }

      // 验证文件大小 (限制为5MB)
      if (fileSize > 5 * 1024 * 1024) {
        Toast.fail("图片大小不能超过5MB");
        return false;
      }

      // 保存初始URL，用于后续识别
      const initialUrl = file.content || file.url;
      console.log("初始图片URL:", initialUrl);

      // Vant会自动将此对象添加到v-model绑定的数组中
      file.status = "uploading";
      file.message = "上传中";

      console.log("开始上传:", file);

      // 调用API
      this.simulateUploadApi(fileObj)
        .then((res) => {
          console.log("上传成功", res, this.formData.images);

          // 查找并更新图片对象
          const index = this.formData.images.findIndex(
            (item) =>
              (item.content && item.content === initialUrl) ||
              (item.url && item.url === initialUrl) ||
              item === file
          );

          if (index !== -1) {
            // 创建一个新的对象，保留原始属性但使用服务器URL
            const newFile = {
              ...file,
              url: res.data.url,
              content: undefined, // 清除content属性，以确保使用url属性
              status: "done",
              message: "",
              fileId: res.data.fileId,
            };

            // 替换数组中的对象
            this.formData.images.splice(index, 1, newFile);
            console.log("已完全替换图片对象", newFile);
          } else {
            console.error("未找到要更新的图片!");

            // 备用方案：仍然尝试更新当前对象
            file.url = res.data.url;
            file.content = undefined; // 清除content属性
            file.status = "done";
            file.message = "";
            file.fileId = res.data.fileId;
          }

          // 强制更新视图
          this.formData.images = [...this.formData.images];
          console.log("上传完成后的图片列表:", this.formData.images);

          // 提示上传成功
          Toast.success("图片上传成功");
        })
        .catch((err) => {
          console.error("上传失败", err);

          // 找到失败的图片在数组中的位置
          const index = this.formData.images.findIndex(
            (item) =>
              (item.content && item.content === initialUrl) ||
              (item.url && item.url === initialUrl) ||
              item === file
          );

          // 如果找到了该图片，从数组中移除
          if (index !== -1) {
            this.formData.images.splice(index, 1);
            console.log("已移除上传失败的图片");
          }

          // 强制更新视图
          this.formData.images = [...this.formData.images];
          console.log("上传失败后的图片列表:", this.formData.images);

          // 提示上传失败
          Toast.fail(`上传失败: ${err.message}`);
        });

      // 返回true表示组件应该保留此文件
      return true;
    },

    // 文件上传API
    simulateUploadApi(file) {
      return new Promise((resolve, reject) => {
        console.log("开始上传文件到服务器", file);
        let formData = new FormData()
        formData.append('multipartFile', file)
        fetch("/termite/upLoadPhoto", {
          method:'post',
          body: formData
        })
        .then(response => {
        if (!response.ok) {
          throw new Error(`HTTP 错误! 状态码: ${response.status}`);
        }
        return response.json(); // 假设服务器返回 JSON
      })
      .then(data => {
        console.log(data, '00000');
        if(data.errorCode == '000000') {
          resolve({
            message: '上传成功',
            data: {
              url: data.data,
              // url: 'http://mcc.nb.cn/mercury-platform-portal-web-prod/static/img/gpt.c2e90ed.png',
              fileId: `file_${Date.now()}`,
              fileName: file.name,
              fileSize: file.size,
              fileType: file.type,
              status: 'done',
              message: '上传完成'
            }
          })
        } else {
          reject({
            code: data.errorCode || 500,
            message: data.errorMsg || '上传失败',
          })
        }
        
      })
      .catch(error => {
        console.error('文件上传过程中发生错误:', error);
        reject({
            code: error.errorCode || 500,
            message: error.errorMsg || '服务器处理异常',
          })
      });
      });
    },

    // 删除图片
    deleteImage(file, detail) {
      const index = detail.index;
      this.formData.images.splice(index, 1);
    },

    // 预览图片
    showImagePreview(file, detail) {
      const index = detail.index;
      const images = this.formData.images.map((item) => item.url);

      // 使用Vant的图片预览组件
      const imagePreview = Toast.loading({
        message: "加载中...",
        forbidClick: true,
      });

      // 延迟一下关闭loading，显示预览
      setTimeout(() => {
        imagePreview.close();
        import("vant").then(({ ImagePreview }) => {
          ImagePreview({
            images,
            startPosition: index,
            closeable: true,
            closeIconPosition: "top-right",
          });
        });
      }, 300);
    },

    // 上传视频
    afterVideoRead(file) {
      // 验证文件大小 (限制为500MB)
      if (file.file.size > 500 * 1024 * 1024) {
        Toast.fail("视频大小不能超过500MB");
        return;
      }

      // 验证文件类型
      const allowedTypes = ["video/mp4", "video/quicktime", "video/x-msvideo"];
      if (!allowedTypes.includes(file.file.type)) {
        Toast.fail("只支持主流视频格式");
        return;
      }

      // 创建视频对象
      const videoObj = {
        url: URL.createObjectURL(file.file),
        file: file.file,
        name: file.file.name,
        isVideo: true,
        status: 'uploading',
        message: '上传中'
      };

      // 清空现有视频并添加新视频
      this.formData.video = [videoObj];
      this.uploadVideo(file.file, 0)
      console.log("formData.video", this.formData.video);
    },
    uploadVideo(file, index) {
      const formData = new FormData()
      formData.append('multipartFile', file)

      fetch("/termite/upLoadPhoto", {
        method:'post',
        body: formData
      }).then(response =>{
        if(!response.ok) {
          throw new Error(`HTTP 错误! 状态码: ${response.status}`);
        }
        return response.json()
      }).then(data => {
        if(data.errorCode === '000000') {
          this.formData.video[index].url = data.data
          this.formData.video[index].status = 'done'
          this.formData.video[index].message = ''
          Toast.success('视频上传成功')
        } else {
          this.formData.video[index].status = 'failed'
          this.formData.video[index].message = data.errorMsg || '上传失败'
          Toast.failed(data.errorMsg || '视频上传失败')
        }
      }).catch(error => {
        this.formData.video[index].status = 'failed'
          this.formData.video[index].message = error.errorMsg || '上传失败'
          Toast.failed(error.errorMsg || '视频上传失败')
      })
    },
    // 删除视频
    deleteVideo() {
      this.formData.video = [];
    },

    // 提交表单
    submitForm() {
      // 表单验证
      if (!this.formData.address.trim()) {
        Toast.fail("请输入房屋地址");
        return;
      }

      if (!this.formData.description.trim()) {
        Toast.fail("请输入问题描述");
        return;
      }

      if (!this.formData.company) {
        Toast.fail("请选择防治企业");
        return;
      }

      if (!this.formData.appointmentTime) {
        Toast.fail("请选择预约时间");
        return;
      }

      console.log("提交表单", this.formData);
      // 实际提交逻辑
      Toast.success("提交成功");
    },

    // 取消
    cancel() {
      console.log("取消");
      // 取消逻辑，如返回上一页
      this.goBack();
    },

    // 获取安全区域值的方法
    getSafeAreaBottom() {
      const div = document.createElement("div");
      div.style.paddingBottom = "env(safe-area-inset-bottom)";
      document.body.appendChild(div);
      const value = getComputedStyle(div).paddingBottom;
      document.body.removeChild(div);
      return value;
    },

    // 显示视频播放弹窗
    showVideoPlayer() {
      if (this.formData.video.length === 0) return;
      this.showVideoDialog = true;
    },

    // 关闭视频播放弹窗
    closeVideoPlayer() {
      this.showVideoDialog = false;
    },

    // 处理视频对话框关闭前的逻辑
    handleDialogBeforeClose() {
      // 关闭前暂停视频播放
      if (this.$refs.videoPlayerRef) {
        this.$refs.videoPlayerRef.pause();
      }
      return true;
    },

    // 选择日期时间
    onDatetimeConfirm(value) {
      // 格式化日期时间
      const date = new Date(value);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      const hours = String(date.getHours()).padStart(2, "0");
      const minutes = String(date.getMinutes()).padStart(2, "0");

      this.formData.appointmentTime = `${year}-${month}-${day} ${hours}:${minutes}`;
      this.showDatetimePicker = false;
    },

    // 取消日期时间选择
    onDatetimeCancel() {
      this.showDatetimePicker = false;
    },

    // 显示日期时间选择器
    showDatetimeSelector() {
      this.showDatetimePicker = true;
    },

    // 跳转到我的上报页面
    goToMyReport() {
      this.$router.push("/my-report");
    },

    // 跳转到测试详情页面
    goToTestDetail() {
      this.$router.push({
        name: "termiteReportDetail",
        params: { id: "test" },
      });
    },

    // 跳转到测试评价页面
    goToTestEvaluation() {
      this.$router.push("/evaluation");
    },

    // 跳转到白蚁企业页面
    goToEnterprise() {
      this.$router.push("/enterprise");
    },
  },
};
</script>

<style scoped>
.report-page {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
}

.nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.back-icon {
  font-size: 20px;
  color: #323233;
}

.title {
  font-size: 16px;
  font-weight: 500;
  color: #323233;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.test-detail-btn {
  display: flex;
  align-items: center;
  color: #323233;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}

.test-evaluation-btn {
  display: flex;
  align-items: center;
  color: #323233;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}

.my-report-btn {
  display: flex;
  align-items: center;
  color: #323233;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}

.enterprise-btn {
  display: flex;
  align-items: center;
  color: #323233;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}

.form-content {
  padding: 0 16px 0 16px;
  border-radius: 4px;
  background-color: #fff;
  margin: 8px 16px;
}

.form-item {
  display: flex;
  align-items: center;
  background-color: transparent;
  padding: 0 0;
  border-bottom: 1px solid #ebedf0;
  height: 45px;
  margin-bottom: 0;
}
.no-padding {
  ::v-deep .van-field {
    padding: 0;
  }
}

.form-item:first-child {
  border-top: none;
}

.form-item:last-of-type {
  margin-bottom: 0;
}

.form-textarea-item {
  background-color: transparent;
  padding: 12px 0;
  border-bottom: 1px solid #ebedf0;
  margin-bottom: 0;
}

.form-upload-item {
  background-color: transparent;
  padding: 12px 0;
  border-bottom: 1px solid #ebedf0;
  margin-bottom: 0;
}

.form-upload-item:last-child {
  border-bottom: none;
}

.form-label {
  height: 20px;
  font-family:
    PingFangSC,
    PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
  line-height: 20px;
  min-width: 80px;
}

.form-input {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 20px;
}

.upload-hint {
  font-size: 12px;
  color: #969799;
}

.textarea-container {
  margin-top: 12px;
}

.upload-container {
  margin-top: 12px;
  width: 100%;
}

.upload-button {
  width: 98px;
  height: 74px;
  min-height: 74px;
  background: #f7f8fa;
  border: 1px dashed #c8c9cc;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c8c9cc;
  box-sizing: border-box;
  flex-shrink: 0;
  /* margin-right: 10px; */
  margin-bottom: 8px;
}

.video-upload-button {
  width: 130px;
  height: 74px;
  background: #f7f8fa;
  border: 1px dashed #c8c9cc;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c8c9cc;
}

.upload-guide {
  font-size: 12px;
  color: #969799;
  margin-top: 8px;
  line-height: 1.4;
}

.bottom-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  background-color: #fff;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.05);
  gap: 12px;
}

.cancel-btn {
  flex: 1;
}

.submit-btn {
  flex: 1;
}

/* 修改Vant样式 */
:deep(.van-field__control) {
  text-align: right;
  height: 20px;
  font-family:
    PingFangSC,
    PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 20px;
}

:deep(.form-textarea-item .van-field) {
  background: transparent;
  padding: 0;
}

:deep(.form-textarea-item .van-field__control) {
  text-align: left;
  padding: 0;
}

:deep(.van-field__word-limit) {
  text-align: right;
  margin-top: 4px;
  color: #969799;
}

/* Field样式调整 */
:deep(.van-field) {
  background: transparent;
}

:deep(.van-field--readonly .van-field__control) {
  color: #969799;
}

/* 自定义上传组件样式 */
:deep(.van-uploader) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 100%;
}

:deep(.van-uploader__upload) {
  background: transparent !important;
  border: none !important;
  width: 98px !important;
  height: 74px !important;
  min-height: 74px !important;
  margin: 0 10px 8px 0 !important;
  flex-shrink: 0 !important;
}

:deep(.van-uploader__upload:nth-child(3n)) {
  margin-right: 0 !important;
}

:deep(.van-uploader__preview) {
  margin: 0 8px 8px 0 !important;
  width: 98px !important;
  height: 74px !important;
}

:deep(.van-uploader__preview:nth-child(3n)) {
  margin-right: 0 !important;
}

:deep(.van-uploader__preview-image) {
  border-radius: 4px;
  overflow: hidden;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/* 视频容器样式 */
.video-container {
  position: relative;
  width: 130px;
  height: 74px;
  margin-bottom: 10px;
  border-radius: 4px;
  /* overflow: hidden; */
}

.video-player {
  width: 100%;
  height: 100%;
  background: #000;
  display: block;
}

.video-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.video-delete {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 16px;
  height: 16px;
  background: #333333;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); */
  /* transition: all 0.2s ease; */
}

.video-delete:hover {
  background: #ff2222;
  transform: scale(1.1);
}

.video-delete:active {
  transform: scale(0.95);
}

/* 视频预览对话框样式 */
:deep(.video-preview-dialog) {
  width: 90% !important;
  max-width: 600px;
}

:deep(.video-preview-dialog .van-dialog__content) {
  padding: 0;
}

:deep(.video-preview-dialog .van-dialog__message) {
  padding: 0;
}

/* 视频对话框内容样式 */
.video-dialog-content {
  padding: 0;
}

.dialog-video-player {
  width: 100%;
  max-height: 70vh;
  display: block;
  background: #000;
}

/* 弹出层样式调整 */
:deep(.van-popup) {
  border-radius: 16px 16px 0 0;
}

:deep(.van-picker__toolbar) {
  padding: 0 16px;
}

:deep(.van-datetime-picker__toolbar) {
  padding: 0 16px;
}

.upload-button:nth-child(3n) {
  margin-right: 0;
}
</style>
